<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .container{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            background-color: darkgrey;
        }
        .boss{
            width: 50%;
            display:flex;
            flex-direction:column;
        }
        .boss1{
            display:flex;
            flex-direction:row-reverse;
            justify-content:space-around
        }
    </style>
    <title>flex</title>
</head>
<body>
 <div class="container">
     <h1>flex</h1>
       <div class="boss">
            <div class="boss1">
                <h2>布局一</h2>
                <h2>布局2</h2>
            </div>
           <div class="boss1">
               <h2>布局3</h2>
               <h2>布局4</h2>
           </div>
           <div class="boss1">
               <h2>布局5</h2>
               <h2>布局6</h2>
           </div>
       </div>
 </div>
</body>
</html>